<template>
  <view>
    <view class="smart-page">
    <!--页面标题头begin-->
    <view class="smart-page-head">
          <view class="smart-page-head-title">map地图</view>
    </view>
    </view>
    <!-- 展示 map.jpg -->
    <image src="/static/map.jpg" mode="widthFix"></image>
    <!-- 地图及标记（location.png 用于标记图标） -->
    <map :latitude="latitude" :longitude="longitude" :markers="covers" :show-location="true"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      covers: [
        {
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/location.png', // 标记图标路径
          width: 30, // 标记图标宽度
          height: 30, // 标记图标高度
        },
      ],
    };
  },
};
</script>

<style>
	.smart-page-head-title{
		    font-size: 48rpx;
		    color: #c0bab7;
		    opacity: 1;
		    /* 新增代码 */
		    text-align: center; /* 水平居中显示 */
		    text-decoration: underline; /* 添加下划线 */
			}
	.map{
		width: 100%;
		height: 300px;
		}
</style>